<div class="devui-month-panel">
  <cdk-virtual-scroll-viewport #scrollList [itemSize]="30" class="devui-year-list" minBufferPx="400" maxBufferPx="600">
    <div
      class="devui-year-list-item"
      [ngClass]="{ 'title-active': index === currentBodyIndex }"
      *cdkVirtualFor="let year of yearList; let index = index"
      (click)="selectYear(year.year)"
    >
      <p class="devui-year-title">{{ year.year }}</p>
    </div>
  </cdk-virtual-scroll-viewport>
  <div class="devui-month-list-wrapper">
    <cdk-virtual-scroll-viewport #scrollBody [itemSize]="calenderItemSize" class="devui-month-list" minBufferPx="400" maxBufferPx="600">
      <div *cdkVirtualFor="let year of yearList; let index = index">
        <p class="devui-table-year-title">{{ year.year + '年' }}</p>
        <table
          class="devui-month-table"
          [ngClass]="{ 'devui-active-month': index === currentBodyIndex }"
          (mouseleave)="curHoverDate = null"
        >
          <tbody>
            <tr *ngFor="let season of monthList">
              <td
                *ngFor="let month of season"
                class="devui-month-item"
                [ngClass]="{
                  'devui-table-month-selected': isSelected(year.year, month),
                  'devui-table-this-month': isThisMonth(year.year, month),
                  'devui-table-date-inrange': isDateInRange(year.year, month),
                  'devui-table-date-start': isStartDate(year.year, month),
                  'devui-table-date-end': isEndDate(year.year, month),
                  'devui-table-date-abandon-selected': isDateAbandon(year.year, month),
                  'devui-table-date-in-selected-range': isDateInSelectRange(year.year, month),
                  'devui-table-date-active-type': isActiveTypeDate(year.year, month)
                }"
              >
                <span
                  (mouseenter)="setHoverTarget(year.year, month)"
                  [ngClass]="{ 'devui-disabled': isDisable(year.year, month) }"
                  (click)="selectMonth(year.year, month)"
                >
                  {{ i18nText.monthsOfYear[month - 1] }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </cdk-virtual-scroll-viewport>
  </div>
</div>
